function ui(jueSeHao) {
	let jieMian = document.getElementById('jie-mian');
	let canvas = document.createElement('canvas');
	let width = Math.max(window.innerWidth, window.innerHeight);
	let height = Math.min(window.innerWidth, window.innerHeight);
	let jiShaXinXiArr = [];
	
	canvas.style.display = 'block'; //样式问题
	canvas.width = width;
	canvas.height = height;
	
	jieMian.appendChild(canvas);
	
	const ctx = canvas.getContext('2d');
	
	function shuaXinUI(xueLiang, jiShaXinXi = '') {
		
		jiShaXinXi != '' ? jiShaXinXiArr.unshift(jiShaXinXi) : 0;

		ctx.clearRect(0, 0, width, height);
		
		let l = 6;
		ctx.beginPath();
		ctx.moveTo(width / 2 - l, height / 2);
		ctx.lineTo(width / 2 + l, height / 2);
		ctx.moveTo(width / 2, height / 2 - l);
		ctx.lineTo(width / 2, height / 2 + l);
		ctx.strokeStyle = '#41ddff';
		ctx.stroke();
		
		ctx.save();
		ctx.font = '900 24px serif';
		ctx.fillStyle = '#79c9e8';
		ctx.textAlign = 'start';
		ctx.textBaseline = 'middle';
		ctx.fillText(`玩家${jueSeHao}号`, 240, height - 20);
		ctx.restore();
		
		ctx.save();
		ctx.beginPath();
		ctx.moveTo(20, height - 20);
		ctx.lineTo(220, height - 20);
		ctx.strokeStyle = '#712f2f';
		ctx.lineWidth = 20;
		// ctx.lineCap = 'round';
		ctx.stroke();
		
		ctx.beginPath();
		ctx.moveTo(20, height - 20);
		ctx.lineTo(20 + xueLiang * 2, height - 20);
		ctx.strokeStyle = '#fd6969';
		ctx.lineWidth = 16;
		ctx.lineCap = 'butt';
		ctx.stroke();
		
		ctx.font = '16px serif';
		ctx.fillStyle = '#ddfdff';
		ctx.textAlign = 'center';
		ctx.textBaseline = 'middle';
		ctx.fillText(`${xueLiang}`, 120, height - 20);
		
		ctx.restore();
		
		//击杀信息
		for (let i = 0; i < jiShaXinXiArr.length && i < 5; i++) {
			ctx.save();
			ctx.beginPath();
			ctx.font = '500 16px serif';
			ctx.fillStyle = 'rgba(255, 255, 255, 0.7)';
			ctx.textAlign = 'start';
			ctx.textBaseline = 'middle';
			ctx.fillText(jiShaXinXiArr[i], width - 200, 100 - i * 18);
			ctx.restore();
		}
		
	}
	
	function juJiJing() {
		
		ctx.moveTo(0, height / 2);
		ctx.lineTo(width, height / 2);
		ctx.moveTo(width / 2, 0);
		ctx.lineTo(width / 2, height);
		ctx.strokeStyle = 'rgba(0, 0, 0, 0.5)';
		ctx.moveTo(width / 2 - 20, height / 2 + 20);
		ctx.lineTo(width / 2 + 20, height / 2 + 20);
		ctx.moveTo(width / 2 - 10, height / 2 + 40);
		ctx.lineTo(width / 2 + 10, height / 2 + 40);
		ctx.stroke();
		
		ctx.save();
		ctx.beginPath();
		ctx.rect(0, 0, width, height);
		ctx.arc(width / 2, height / 2, height * 0.45, 0, Math.PI * 2);
		ctx.fillStyle = '#000000';
		ctx.fill('evenodd');
		ctx.restore();

	}
	
	return {
		shuaXinUI,
		juJiJing
	}
}

export default ui;
